<script setup>
import request from "@/utils/axios";
import { ref ,reactive} from "vue";
import { useRouter } from "vue-router";
import {Toast} from "vant";
const router = useRouter();


const userInfo = reactive({
    userAccount:'',
    userPassword:'',
    checkPassword:'',
    gender:'',
    username:'',
    phone:'',
})

const onSubmit = async ()=>{
    const res = await request.post("user/register",{
        ...userInfo,
        gender:userInfo.gender === '男' ? 1 : 0
    })
    if(res.code === 0){
        showSuccessToast('注册成功');;
        router.push('/user/login')
    }else {
        showFailToast(res.description);
    }
}
const onClickLeft = () => {
    router.back();
};

</script>
<template>

    <van-sticky>
        <van-nav-bar :title="`注册`" left-arrow @click-left="onClickLeft">
        </van-nav-bar>
    </van-sticky>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="userInfo.userAccount" name="userAccount" label="账号" placeholder="请填写账号"
                :rules="[{ required: true, message: '请填写账号' }]" />
            <van-field v-model="userInfo.userPassword" type="password" name="userPassword" label="密码" placeholder="请填写密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="userInfo.checkPassword" type="password" name="checkPassword" label="确认密码" placeholder="请再输入一次密码"
                :rules="[{ required: true, message: '请再输入一次密码' }]" />
            <van-field v-model="userInfo.username" name="username" label="用户名" placeholder="请填写用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="userInfo.gender" type="text" name="性别" label="性别" placeholder="请填写性别"
                :rules="[{ required: true, message: '请填写性别' }]" />
            <van-field v-model="userInfo.phone" name="phone" label="手机号" placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>

</template>

<style scoped lang='scss'></style>